<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    input {
      outline: none;
    }
    #outer {
      width: 300px;
      margin: 10px auto;
      padding: 0 15px 30px;
      color: white;
      background: skyblue;
      text-align: center;
    }
    .text {
      width: 35px;
      height: 20px;
      margin: 30px 5px;
      text-align: center;
    }
    #btn {
      display: block;
      width: 270px;
      margin: 0 auto;
      background: blue;
      padding: 10px;
      text-align: center;
      color: white;
      font-size: 20px;
      cursor: pointer;
    }
  </style>
  <body>
    <div id="outer">
      <input
        type="text"
        class="text"
        readonly="readonly"
        maxlength="2"
        value="01"
      />
      <span>分钟</span>
      <input
        type="text"
        class="text"
        readonly="readonly"
        maxlength="2"
        value="10"
      />
      <span>秒</span>
      <button id="btn">启动</button>
    </div>
  </body>
  <script>
    var oDiv = document.getElementById("outer");
    var oBtn = document.getElementById("btn");
    var s = false;
    var timer = null;
    oBtn.onclick = function () {
      if (s == false) {
        timer = setInterval(updateTime, 1000);
        updateTime();

        this.style.cssText = "background:red";
        this.innerHTML = "取消";
        s = true;
      } else {
        clearInterval(timer);

        this.style.cssText = "";
        this.innerHTML = "启动";
        s = false;
      }
      function format(a) {
        return a.toString().replace(/^(\d)$/, "0$1");
      }
      function updateTime() {
        var oInput = oDiv.getElementsByTagName("input");
        var oRemain =
          oInput[0].value.replace(/^0/, "") * 60 +
          parseInt(oInput[1].value.replace(/^0/, ""));
        if (oRemain <= 0) {
          clearInterval(timer);
          return;
        }
        oRemain--;
        oInput[0].value = format(parseInt(oRemain / 60));
        oRemain %= 60;
        oInput[1].value = format(parseInt(oRemain));
      }
    };
  </script>
</html>
